<template>
  <div class="cart" v-if="ret && list">
    <table>
      <thead>
        <tr>
          <th><input type="Checkbox" />全选</th>
          <th>商品信息</th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody-view :list.sync="list"></tbody-view>
      <tfoot-view></tfoot-view>
    </table>
  </div>
</template>

<script>
import { GetCart } from '@/api/cart'
import TbodyView from './tbody.vue'
import TfootView from './tfoot.vue'
export default {
  async created() {
    try {
      const result = await GetCart()
      this.ret = result.result.ret
      this.list = result.result.ret.list.map((item) => ({
        ...item,
        spec: typeof item.spec === 'string' ? JSON.parse(item.spec) : item.spec
      }))
    } catch (error) {
      console.log(error.message)
    }
  },
  data() {
    return {
      ret: {},
      list: []
    }
  },
  computed: {},
  components: {
    TbodyView,
    TfootView
  }
}
</script>

<style scoped>
.cart {
  width: 1200px;
  margin: auto;
  display: flex;
  flex-direction: column;
  /* border: 1px solid #000; */
  background-color: white;
}
table,
tr,
th,
td {
  border-collapse: collapse;
  border-spacing: 0;
}
thead {
  height: 60px;
  line-height: 60px;
  background-color: rgb(242, 242, 242);
  /* border: 1px solid #000; */
}
</style>
